<template>
  <div>
    <div>
      <el-card style="margin: 20px 50px">
        <el-form :inline="true">
          <el-form-item label="区域">
            <el-select v-model="queryInfo.qy" placeholder="请选择" @change="changeQy()" ref="qySelect">
              <el-option label="东部探井" value="1"></el-option>
              <el-option label="东部常规" value="2"></el-option>
              <el-option label="东部非常规" value="3"></el-option>
              <el-option label="东部勘探工作量完成情况" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型" v-if="queryInfo.qy == '' || queryInfo.qy !== '4' ">
            <el-select v-model="queryInfo.lx" placeholder="请选择">
              <el-option label="投资及工作量完成情况" value="1"></el-option>
              <el-option label="成本分析" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年份选择">
            <el-date-picker
              type="years"
              v-model="queryInfo.year"
              @change="handleDateChange"
              value-format="yyyy"
              :picker-options="pickerYearOptions"
              placeholder="选择一个或多个年">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="时间选择">
            <el-date-picker
              v-model="startEndTime"
              @change="changeTime"
              value-format="yyyy-MM"
              type="monthrange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </el-form-item>

        </el-form>
        <el-radio v-model="barOrLine" label="bar">柱状图</el-radio>
        <el-radio v-model="barOrLine" label="line">折线图</el-radio>
        <el-button @click="drawCharts" type="primary">查询</el-button>
      </el-card>
    </div>
    <div style="display: flex;flex-wrap: wrap">
      <el-card v-show="firstOrSecond == 1" style="margin: 50px;width: 100%">
        <div id="firstMain" style="width: 50%; height: 500px;"></div>
      </el-card>
      <el-card v-show="firstOrSecond == 2" style="margin: 50px;width: 100%">
        <div id="secondMain" style="width: 50%; height: 500px;"></div>
      </el-card>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import { Decrypt } from "@/utils/AesHmacMD5";
import { getTermlist } from "@/api/vadmin/process/charts";


export default {
  name: 'indexEcharts',
  data() {
    return {
      //图表名称
      title: '',
      firstOrSecond: '',
      barOrLine: 'bar',

      startEndTime: '',
      queryInfo: {
        year: [], //年份选择
        qy: '', //选择框1
        lx: '', //选择框2
        startTime:'', //开始时间
        endTime: '', //结束时间
      },


      pickerOptions: {
        // 禁止选择非当前年份的月份
        disabledDate(time) {
          const currentYear = new Date().getFullYear(); // 获取当前年份
          return time.getFullYear() !== currentYear; // 禁用非本年日期
          // 获取当前日期的年份
        },
      },
      pickerYearOptions: {
        disabledDate: (date) => {
          const currentYear = new Date().getFullYear();
          return date.getFullYear() >= currentYear; // 禁止选择当前年份之前的年份
        },
      }
    };
  },
  mounted() {
    // this.drawCharts()
  },


  methods: {
    changeTime() {
      this.queryInfo.startTime = this.startEndTime[0]
      this.queryInfo.endTime = this.startEndTime[1]
    },
    handleDateChange(value) {
      // 每次选择日期后触发该方法
      console.log('日期改变了:', value);
      this.date = value;  // 更新绑定的日期
    },
    //区域选择框时间
    changeQy() {
      // 通过选中的 value 查找对应的 label
      const selectedOption = this.$refs.qySelect.options.find(option => option.value === this.queryInfo.qy);
      this.title = selectedOption.label

    },
    drawCharts() {
      if(this.queryInfo.qy == 4) this.queryInfo.lx = '1'
      this.firstOrSecond = this.queryInfo.lx
      this.getTermlist()
    },
    //获取成本分析===>东部探井成本分析
    getTermlist() {
      if(this.queryInfo.qy == 4) this.queryInfo.lx = '1'
      getTermlist(this.addDateRange(this.queryInfo)).then(res => {
        let resData =  JSON.parse(Decrypt(res.data))
        console.log(resData,'resData===>');
       if(this.queryInfo.lx == 1 ||  this.queryInfo.qy == 4) {
          let chartData = []
          for(let i = 0; i < resData.results.x_weeks.length; i++) {
            const x = resData.results.x_weeks[i];  // 获取x_weeks中的当前元素
            const y = resData.results.y_weeks[i];  // 获取y_weeks中对应索引的当前元素
            // 将年份和y_weeks中的数据合并成一个新的数组
            const mergedItem = [x, ...y];
            chartData.push(mergedItem)
          }
          this.drawFirstChart(chartData,this.title + '投资工作量同期对比')
        }else if(this.queryInfo.lx == 2) {
          console.log('选择的是成本的同期对比');
          let yData = resData.results.y_weeks.flat()
          console.log('需要传递的参数', resData.results.x_weeks,yData);
          this.drawSecond(resData.results.x_weeks,yData,'secondMain', this.title + '成本同期对比')
        }

      })
    },

    //图表  投资及工作量图表
    drawFirstChart(chartData, title) {
      let chartDom = document.getElementById('firstMain');
      let myChart = echarts.init(chartDom);
      const colors = ['#5470C6', '#ED7D31', '#00B050'];
      let option;

      let sourceArr = [['年份', '投资', '探井口数', '探井进尺']];
      sourceArr = sourceArr.concat(chartData);

      option = {
        dataset: {
          source: sourceArr
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%',
          top: '30%',
          containLabel: true
        },
        legend: {
          //水平排列
          orient: 'horizontal',
          show: true,  // 显示图例
          top: '10%',  // 图例位置
          left: '40%',  // 图例居中显示
          textStyle: {
            color: '#865a18',  // 设置图例文本颜色
            fontSize: 12  // 设置图例字体大小
          }
        },
        title: {
          text: title
        },
        xAxis: { type: 'category' },
        yAxis: [
          {
            type: 'value',
            name: '金额(万元)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '探井(口数)',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '探井进尺(万米)',
            position: 'right',
            alignTicks: true,
            offset: 70,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: '{value}万米'
            }
          }
        ],
        series: [
          {
            name: '投资',
            type: this.barOrLine,
            barWidth: 20,
            yAxisIndex: 0,  // 对应第一个 yAxis (投资)
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: function (params) {
                // 判断值是否为0
                if (params.value[1] === 0) {
                  return '待发生';  // 显示 "待发生" 字样
                }
                return params.value[1];  // 显示实际的数值
              },
              color: '#5470C6',  // 设置字体颜色
              fontSize: 12,  // 设置字体大小
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            itemStyle: {
              color: colors[0]
            },

          },
          {
            name: '探井口数',
            type: this.barOrLine,
            barWidth: 20,
            yAxisIndex: 1,  // 对应第二个 yAxis (探井口数)
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: function (params) {
                // 判断值是否为0
                if (params.value[2] === 0) {
                  return '待发生';  // 显示 "待发生" 字样
                }
                return params.value[2];  // 显示实际的数值
              },
              color: '#ED7D31',  // 设置字体颜色
              fontSize: 12,  // 设置字体大小
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            itemStyle: {
              color: colors[1]
            },

          },
          {
            name: '探井进尺',
            type: this.barOrLine,
            barWidth: 20,
            yAxisIndex: 2,  // 对应第三个 yAxis (探井进尺)
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: function (params) {
                // 判断值是否为0
                if (params.value[3] === 0) {
                  return '待发生';  // 显示 "待发生" 字样
                }
                return params.value[3];  // 显示实际的数值
              },
              color: '#00B050',  // 设置字体颜色
              fontSize: 12,  // 设置字体大小
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            itemStyle: {
              color: colors[2]
            },

          }
        ]
      };

      // 为图表添加点击事件
      myChart.on('click', function (params) {
        params.seriesType = 'line'

        myChart.setOption(option);

      });


      option && myChart.setOption(option);
    },



    //成本同期对比图表
    drawSecond(xData, yData,id,title) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      // 线性渐变色的设置
      const gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' }, // 起始颜色
        { offset: 1, color: '#188df0' }  // 结束颜色
      ]);

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          // 自定义提示框的显示格式
          formatter: function (params) {
            // 只显示第一个系列的数据
            let firstSeries = params[0];
            let color = firstSeries.color;  // 获取该系列的颜色

            // 返回带颜色小圆点的HTML格式
            return `<span style="display:inline-block;width:10px;height:10px;background-color:#188df0;border-radius:50%;margin-right:5px;"></span>`
              + firstSeries.seriesName + ': ' + firstSeries.value + ' 元/(米)';
          }
        },
        legend: {
          data: '金额(万元)'
        },
        grid: {
          right: '20%',
          top: '20%',
          containLabel: true
        },
        title: {
          text:title
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '金额(元)',
            type: this.barOrLine,
            barWidth: '20%',
            itemStyle: {
              // 使用线性渐变色
              color: gradientColor
            },
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c} 元/(米)',  // 显示柱子上的数值
              color: '#053062',  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            data: yData
          },
          {
            type: 'line',
            barWidth: '20%',
            itemStyle: {
              // 使用线性渐变色
              color: '#ff0014'
            },
            data: yData
          }
        ]
      };

      option && myChart.setOption(option);
    },
  }
}
</script>

